<template>
    <div id="app">
        <!--<img alt="Vue logo" src="./assets/logo.png">-->
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <show-message message="Hello World" id="why" class="yk">
            <template #default>
                <span>哈哈哈哈</span>
            </template>
            <template #content>
                <span>呵呵呵呵</span>
            </template>
        </show-message>
        <ref/>
        <readonly/>
        <p>---------------------------</p>
        <p>---------------------------</p>
        <demo/>
        <p>---------------------------</p>
        <p>---------------------------</p>
        <gsap/>
        <p>---------------------------</p>
        <p>---------------------------</p>
        <transition-group1/>
        <p>---------------------------</p>
        <p>---------------------------</p>
        {{name}}
        <!-- 下面这玩意儿没显示，不知道为啥 -->
        <components1/>
        <p>---------------------------</p>
        <p>---------------------------</p>
        <promise/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import ShowMessage from "./components/Composition API/ShowMessage";
    import Ref from "./components/ref API/ref";
    import Readonly from "./components/ref API/readonly";
    import Demo from "./components/过渡动画/demo";
    import Gsap from "./components/过渡动画/gsap";
    import TransitionGroup1 from "./components/过渡动画/transition-group";
    import Components1 from "./components/过渡动画/components";
    import Promise from "./components/promise/Promise";

    export default {
        name: 'app',
        data() {
            return{
                name: 'jjj'
            }
        },
        components: {
            Promise,
            Components1,
            TransitionGroup1,
            Gsap,
            Demo,
            Readonly,
            Ref,
            ShowMessage,
            HelloWorld
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
